<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>管理员管理介面－－－错误列表</title>
  </head>
  <body>
    <div id="errorinfogrid">
    </div>
    <div id="error_content">
    </div>
    <script>
        /*
         * Ext JS Library 2.1
         * Copyright(c) 2006-2008, Ext JS, LLC.
         * licensing@extjs.com
         *
         * http://extjs.com/license
         */
        //为了一般JS方法可以调用，这个变量定义要放在onReady外面．
        var errorInfoDS;
        Ext.onReady(function(){
            var errorInfoCM = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {
                    id: 'id',
                    header: "Identify",
                    dataIndex: 'id',
                    width: 15,
                    hidden: true
                }, {
                    header: "用户名称",
                    width: 15,
                    dataIndex: 'user_name'
                }, {
                    header: "IP",
                    width: 25,
                    dataIndex: 'ip_from'
                },{
                    header: "Controller",
                    width: 30,
                    dataIndex: 'c_name'
                }, {
                    header: "Action",
                    width: 25,
                    dataIndex: 'a_name'
                }, {
                    header: "Level",
                    width: 15,
                    dataIndex: 'log_level'
                }, {
                    header: "信息",
                    width: 190,
                    dataIndex: 'content'
                }, {
                    header: "时间",
                    width: 35,
                    dataIndex: 'created_at',
                    renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s')
                }]);
            errorInfoCM.defaultSortable = true;    
            /************************************************************
             * connect to backend - grid - core part
             * create the Data Store
             *   connect with backend and list the result in page
             *   through JSON format
             ************************************************************/
            errorInfoDS = new Ext.data.Store({
                // load using script tags for cross domain, if the data in on the same domain as
                // this page, an HttpProxy would be better
                proxy: new Ext.data.HttpProxy({
                    url: '/admin/getAllErrorInfo'
                }),
                // create reader that reads the Topic records
                reader: new Ext.data.JsonReader({
                    root: 'root',
                    totalProperty: 'totalProperty',
                    id: 'id'
                }, [{
                        name: 'id'
                    }, {
                        name: 'user_name',
                        mapping: 'user.user_name'
                    }, {
                        name: 'c_name'
                    }, {
                        name: 'a_name'
                    }, {
                        name: 'log_level'
                    }, {
                        name: 'ip_from'
                    }, {
                        name: 'content'
                    }, {
                        name: 'created_at'
                    }])
            });
                
            //
            var searchType = new Ext.form.ComboBox({ //combobox   
                name: 'search_type',
                fieldLabel: '<span class="red">*</span>搜索类型',
                //width: '80',
                resiable: true,
                typeAhead: true,
                allowBlank: false,
                handleHeight: 100, //   
                displayField: 'key',
                valueField: 'value',
                selectOnFocus: true,
                mode: 'local',
                selectOnFocus: true,
                triggerAction: 'all',//这个属性非常重要,可以在选择一个值以后,依然还显示其它的值.
                readOnly: true,
                emptyText: '选择搜索类型...',
                store: new Ext.data.Store({
                    data: [['c_name', 'Controller'], ['a_name', 'Action']],
                    reader: new Ext.data.ArrayReader({
                        id: 0
                    }, [{
                            name: 'value'
                        }, {
                            name: 'key'
                        }])
                }), //数据储存到这个comboBox   
                anchor: '100%'
            });
                
            var searchKey = new Ext.form.TextField({
                fieldLabel: '关键字',
                allowBlank: false,
                name: 'search_key',
                anchor: '100%',
                hideLabel: true
            });
            
            var infoLevel = new Ext.form.Radio({
                fieldLabel: '消息级别',
                name: 'log_level',
                id: 'level_info',
                boxLabel: 'Info',
                inputValue: 'info'
            });
            var errorLevel = new Ext.form.Radio({
                name: 'log_level',
                id: 'level_error',
                boxLabel: 'Error',
                checked: true,
                hideLabel: true,
                inputValue: 'error'
            });
            
            var searchFormPannel = new Ext.FormPanel({
                labelWidth: 50,
                //frame: true,
                labelAlign: 'right',
                //baseCls: 'x-plain',
                defaults: {
                    width: 700,
                    height: 20
                },
                items: [{
                        layout: 'column',
                        border: false,
                        items: [{
                                columnWidth: .3,
                                layout: 'form',
                                border: false,
                                items: [searchType]
                            }, {
                                columnWidth: .3,
                                layout: 'form',
                                border: false,
                                items: [searchKey]
                            }, {
                                columnWidth: .2,
                                layout: 'form',
                                border: false,
                                items: [infoLevel]
                            }, {
                                columnWidth: .2,
                                layout: 'form',
                                border: false,
                                items: [errorLevel]
                            }]
                    }]
            });
            function onSearchClick(){
                if (searchFormPannel.form.isValid()) {
                    errorInfoDS.baseParams.search_type = searchType.getValue();
                    errorInfoDS.baseParams.search_key = searchKey.getValue();
                    errorInfoDS.baseParams.log_level = errorLevel.getValue();
                    errorInfoDS.load({
                        params: {
                            start: 0,
                            limit: 30
                        }
                    });
                    errorInfoDS.baseParams.search_type = null;
                    errorInfoDS.baseParams.search_key = null;
                    errorInfoDS.baseParams.log_level = null;
                }
            }
            /************************************************************
             * add a paging toolbar to the grid's footer
             ************************************************************/
            var myPagingToolbar = new Ext.PagingToolbar({
                pageSize: 30,
                displayInfo: true,
                displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
                emptyMsg: "没有记录",
                store: errorInfoDS
            });
                
            /************************************************************
             * Define menubar now in here
             *   add and delete functions
             ************************************************************/
            var menubar = [searchFormPannel, {
                    text: '搜索',
                    tooltip: '搜索',
                    iconCls: 'finding',
                    handler: function(){
                        onSearchClick();
                    }
                }, '-', {
                    text: '删除',
                    tooltip: 'Remove the selected items',
                    iconCls: 'remove',
                    handler: function(){
                        DeleteErrorInfo(errorInfoDS, errorInfoGridPanel);
                    }
                }];
            /************************************************************
             * define grid panel now
             ************************************************************/
            var errorInfoGridPanel = new Ext.grid.GridPanel({
                border: false,
                el: 'errorinfogrid',
                ds: errorInfoDS,
                cm: errorInfoCM,
                autoWidth: true,
                viewConfig: {
                    forceFit: true
                },
                loadMask: true,
                iconCls: 'icon-grid',
                collapsible: true,
                animCollapse: false,
                autoWidth: true,
                //frame: true,
                title: 'LOG列表',
                tbar: menubar,
                bbar: myPagingToolbar,
                height:400
            });
                
            //panel render
            errorInfoGridPanel.render();
            // trigger the data store load
            errorInfoDS.load({
                params: {
                    start: 0,
                    limit: 30
                }
            });
            var errorContent = new Ext.form.TextArea({
                //fieldLabel: '',
                allowBlank: true,
                readOnly: true,
                width: '100%',
                heigth: 700,
                renderTo:'error_content',
                name: 'content',
                anchor: '90%'
            });
                    
            errorInfoGridPanel.on('rowdblclick', function(errorInfoGridPanel, rowIndex, e){
                var errorRow = errorInfoDS.getById(errorInfoDS.data.items[rowIndex].id);
                errorContent.setValue(errorRow.get("content")) ;
            });
            
            //----------------Delete WebUser--------------------------
            function DeleteErrorInfo(dataStore, errorInfoGridPanel){
                // get the selected items
                var m = errorInfoGridPanel.getSelections();
                if (m.length > 0) {
                    Ext.MessageBox.confirm('提示', '你真的要删除这些错误信息吗？', function(btn){
                        if (btn == 'yes') {
                            var jsonData = "[";
                            for (var i = 0, len = m.length; i < len; i++) {
                                var ss = "{\"id\":\"" + m[i].get("id") + "\"}";
                                if (i == 0) 
                                    jsonData = jsonData + ss;
                                else jsonData = jsonData + "," + ss;
                                dataStore.remove(m[i]);
                            }
                            jsonData = jsonData + "]";
                            //Ext.MessageBox.alert(jsonData);
                            dataStore.load({
                                params: {
                                    start: 0,
                                    limit: 30,
                                    delData: jsonData
                                }
                            });
                        }
                    });
                }
                else {
                    Ext.MessageBox.alert('错误提示', '要删除用户时，请至少选择一个错误信息');
                }
            };
        });
    </script>
  </body>
</html>
